<template>
  <div v-if="loading" style="text-align: center;padding: 50px;">
    <a-spin></a-spin>
  </div>
  <entity-view v-else @submit="submit" ref="imageForm"  :model="settleInfo" class="custom-modal" :operator-type="operatorType">
    <div class="subtitle">商户结算信息</div>
    <div class="sub-content-flex">
      <form-item label="商户结算模式" prop="mchntSettleMode" v-model="settleInfo.mchntSettleMode" input-type="radioGroup" :options="[
        {value: '00', label: '轧差清算'},
        {value: '01', label: '收支两线'}
      ]"></form-item>
      <form-item><br></form-item>
      <form-item label="结算方式" v-model="settleInfo.settleAcctInfo.settleType" prop="settleAcctInfo.settleType" @change="changeSettleType" input-type="select" :options="settleTypeOption"></form-item>
      <form-item  v-if="!showCycle"><br></form-item>
      <form-item v-if="showCycle" label="结算周期"   prop="settleAcctInfo.settleCycle" >
        <span >{{cycleLabel}}
          <a-input v-model="settleInfo.settleAcctInfo.settleCycle"  style="width: 100px" onkeyup="value=value.replace(/[^\d]+/g,'')" onafterpaste="value=value.replace(/[^\d]+/g,'')"/>天</span>
      </form-item>
      <form-item label="结算账号" v-model="settleInfo.settleAcctInfo.settleAcctNo" prop="settleAcctInfo.settleAcctNo" disabled></form-item>
      <form-item  v-if="operatorType === 'add' || operatorType === 'edit'"><a href="javascript:" @click="settingSettleAcctNo('00')">配置结算账号</a></form-item>
      <form-item label="手续费结算方式" v-if="settleInfo.mchntSettleMode === '01'" v-model="settleInfo.feeAcctInfo.settleType" @change="changeFeeSettleType" prop="feeAcctInfo.settleType" input-type="select" :options="settleTypeOption"></form-item>
      <form-item  v-if="settleInfo.mchntSettleMode === '01' && !showFeeCycle"><br></form-item>
      <form-item v-if="settleInfo.mchntSettleMode === '01' && showFeeCycle" label="手续费结算周期"   prop="feeAcctInfo.settleCycle" >
        <span >{{feeCycleLabel}}
          <a-input v-model="settleInfo.feeAcctInfo.settleCycle"  style="width: 100px"  onkeyup="value=value.replace(/[^\d]+/g,'')" onafterpaste="value=value.replace(/[^\d]+/g,'')"/>天</span>
      </form-item>
      <form-item label="手续费结算账号" v-if="settleInfo.mchntSettleMode === '01'" v-model="settleInfo.feeAcctInfo.settleAcctNo" prop="feeAcctInfo.settleAcctNo" disabled></form-item>
      <form-item  v-if="settleInfo.mchntSettleMode === '01' && (operatorType === 'add' || operatorType === 'edit')"><a href="javascript:" @click="settingFeeAcctNo('01')">配置结算账号</a></form-item>

    </div>
    <div class="subtitle">商户结算账户</div>
    <div class="sub-content-flex">
        <a-table
          ref="TableInfo"
          tableLayout="auto"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
        >
        </a-table>
    </div>
    <div class="btn-wrapper">
      <a-button type="primary" @click="previous">上一步</a-button>
      <a-button type="primary" html-type="submit">下一步</a-button>
    </div>
    <a-modal
      v-model="modalVisible"
      title="结算账户配置"
      width="1200px"
      @ok="acctCfgSubmit"
      :maskClosable="false"
    >
      <settle-acct-info ref="modalForm"/>
    </a-modal>
  </entity-view>
</template>

<script>
import EntityView from '../../../../components/common/entityView/EntityView'
import FormItem from '../../../../components/common/entityView/FormItem'
import SettleAcctInfo from "./SettleAcctInfo.vue";
export default {
  name: 'SettleInfoForm',
  components: {EntityView, FormItem,SettleAcctInfo},
  inject: ['merchantBaseInfoContext', 'operationContext'],

  data: function () {
    return {
      settleInfo: {
        mchntSettleMode: "00",
        settleAcctInfo: {},
        feeAcctInfo: {},
      },
      settleTypeOption:[],
      d0Flag:"",
      dataSource:[],
      operatorType:"add",
      modalVisible:false,
      loading:false,
      acctCfg:"settle",
      showCycle:false,
      cycleLabel:"",
      showFeeCycle:false,
      feeCycleLabel:"",
      columns:[
        {
          title: "结算账号",
          dataIndex: "settleAcctNo",
        },
        {
          title: "账户名称",
          dataIndex: "settleAcctName",
        },
        {
          title: "开户行行号",
          dataIndex: "settleAcctBankNo",
        },
        {
          title: "开户行名称",
          dataIndex: "settleAcctBankName",
        },
        {
          title: "账户类型",
          dataIndex: "settleAcctType",
          // 00-本行借记账户,01-本行贷记账户,02-本行存折,03-本行内部户,10-他行借记账户,11-他行贷记账户,12-他行存折,13-他行内部户;
          customRender: (text) => {
            switch (text) {
              case "00":
                return "本行借记账户";
              case "01":
                return "本行贷记账户";
              case "02":
                return "本行存折";
              case "03":
                return "本行内部户";
              case "10":
                return "他行借记账户";
              case "11":
                return "他行贷记账户";
              case "12":
                return "他行存折";
              case "13":
                return "他行内部户";
            }
          },
        },
      ],
    }
  },
  mounted () {
    this.getPageInfo();
    this.setSettleTypeOption();

  },
  methods: {
    async submit () {
      try {
        if(this.operationContext.operatorType === 'edit'||this.operationContext.operatorType === 'add'){
          const res = await this.$refs.imageForm.validate();

          if (!this.settleInfo.settleAcctInfo.settleType) {
            this.$message.error("请选择结算方式");
            return false
          }

          if (res) {
            const params = Object.assign({}, this.settleInfo)
            console.log(params)
            params.settleAcctInfoList = this.dataSource;
            params.optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operationContext.operatorType]
            const res = await this.$post('/admin/mcmp/bMchntBaseInfo/editMchntAcct', params)
            if (res.data.code === "100000") {
              this.$message.success('保存成功！')
              this.$emit("submit");
              return true
            } else {
              this.$message.error(res.data.message)
              return false
            }
          }
        } else {
          this.$emit('submit', ...arguments)
        }
      } catch (e) {
        console.error(e)
      }
    },
    resetFields () {
      return this.$refs.form.resetFields()
    },
    async getPageInfo () {
      try {
        this.operatorType = this.operationContext.operatorType;
        let optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`, chk: `chk`}[this.operatorType]
        this.loading = true;
        const param = {
          optFlag: optFlag,
          instId: this.merchantBaseInfoContext.query.instId,
          mchntNo: this.operationContext.beanInfo.mchntNo
        }
        const res = await this.$get('/admin/mcmp/bMchntBaseInfo/editMchntAcct',param);
        this.loading = false;
        this.settleInfo = res.data.entity
        this.pageInfo = res.data
        this.settleInfo.mchntNo = this.operationContext.beanInfo.mchntNo
        this.d0Flag=res.data.d0Flag
        this.dataSource = []
        if(typeof res.data.entity.settleAcctInfo !== 'undefined'){
          this.dataSource[0] = this.settleInfo.settleAcctInfo
          this.changeSettleType(this.settleInfo.settleAcctInfo.settleType)
        }else{
          this.settleInfo.settleAcctInfo = {}
        }
        if(typeof res.data.entity.feeAcctInfo !== 'undefined'){
          this.dataSource[1] = this.settleInfo.feeAcctInfo
          this.changeFeeSettleType(this.settleInfo.feeAcctInfo.settleType)
        }else{
          this.settleInfo.feeAcctInfo = {}
        }
        if(optFlag !== 'add') {

        }
      } catch (e) {
        console.error(e)
        this.loading = false;
      }
    },
    changeFeeSettleType (val) {
      if(val === 'D0' || val === 'T1'){
        this.showFeeCycle = false
      }else{
        this.showFeeCycle = true
      }
      if(val === 'TN'){
        this.feeCycleLabel = '延迟'
      }
      if(val === 'MT'){
        this.feeCycleLabel = '每月第'
      }
      if(val === 'ST'){
        this.feeCycleLabel = '每季第'
      }
    },
    changeSettleType (val) {
      if(val === 'D0' || val === 'T1'){
        this.showCycle = false
      }else{
        this.showCycle = true
      }
      if(val === 'TN'){
        this.cycleLabel = '延迟'
      }
      if(val === 'MT'){
        this.cycleLabel = '每月第'
      }
      if(val === 'ST'){
        this.cycleLabel = '每季第'
      }
    },
    previous () {
      this.operationContext.tabActiveKey = 'imageInfo';
    },
    settingSettleAcctNo (fundType) {
      this.modalVisible = true;
      this.acctCfg = 'settle';
      this.$nextTick(() => {
          this.$refs.modalForm.setBeanInfo(this.settleInfo.settleAcctInfo,this.operationContext.beanInfo.mchntNo,this.merchantBaseInfoContext.query.instId,this.acctCfg,fundType);
      });
    },
    settingFeeAcctNo (fundType) {
      this.modalVisible = true;
      this.acctCfg = 'fee';
      this.$nextTick(() => {
          this.$refs.modalForm.setBeanInfo(this.settleInfo.feeAcctInfo,this.operationContext.beanInfo.mchntNo,this.merchantBaseInfoContext.query.instId,this.acctCfg,fundType);
      });
    },
    async acctCfgSubmit () {
      try {
        const res = await this.$refs.modalForm.$refs.form.validate()
        if(res){
          let settleImagelist = this.$refs.modalForm.acctInfo.settleImagelist;
          if(typeof settleImagelist[0] === 'undefined' || settleImagelist[0].imageLocalPath === ''){
            this.$message.error("必须上传结算账号正面/开户证明文件");
            return false;
          }
          if(typeof settleImagelist[1] === 'undefined' || settleImagelist[1].imageLocalPath === ''){
            this.$message.error("必须上传资金管理关系证明照");
            return false;
          }
          if(this.acctCfg === 'settle'){
            this.settleInfo.settleAcctInfo = this.$refs.modalForm.acctInfo
            this.dataSource[0] = this.settleInfo.settleAcctInfo
          }
          if(this.acctCfg === 'fee'){
            this.settleInfo.feeAcctInfo = this.$refs.modalForm.acctInfo
            this.dataSource[1] = this.settleInfo.feeAcctInfo
          }
          this.modalVisible = false
        }
      }catch (e) {
        console.error(e);
      }
    },
    setSettleTypeOption(){
      if(this.d0Flag==="Y"){
        this.settleTypeOption=[
          {value: '', name: '请选择'},
          {value: 'D0', name: 'D+0清算'},
          {value: 'T1', name: 'T+1清算'},
          {value: 'TN', name: 'T+N清算'},
          {value: 'MT', name: '按月清算'},
          {value: 'ST', name: '按季清算'},
        ]
      }else{
        this.settleTypeOption=[
          {value: '', name: '请选择'},
          {value: 'T1', name: 'T+1清算'},
          {value: 'TN', name: 'T+N清算'},
          {value: 'MT', name: '按月清算'},
          {value: 'ST', name: '按季清算'},
        ]
      }
    }

  }
}
</script>

<style scoped>
.btn-wrapper{
  padding: 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
.custom-modal .ant-calendar-picker{
    width: 100%;
}
.ant-table-wrapper{
    width: 100%;
}
</style>
